<template>
  <div style="height: 100%; width: 100%" ref="diqiu">
    <div class="leftbigbox">
      <div class="tip" style="height: 30vh">
        <dv-border-box-8>
          <h2>上传数据</h2>
          <div class="obbz">
            <datauploadVue> </datauploadVue></div
        ></dv-border-box-8>
      </div>
      <div class="tip" style="margin-top: 1vh; height: 54vh">
        <dv-border-box-8>
          <h2>数据总览</h2>
          <div class="obbz"><datazong></datazong></div
        ></dv-border-box-8>
      </div>
    </div>
    <div class="rightbigbox">
      <div class="box tip">
        <dv-border-box-8>
          <h2>数据统计</h2>
          <div class="obbz"><zhu></zhu></div
        ></dv-border-box-8>
      </div>
      <div class="box tip" style="margin-top: 1vh">
        <dv-border-box-8>
          <h2>数据占比</h2>
          <div class="obbz"><yuan></yuan></div
        ></dv-border-box-8>
      </div>
    </div>
  </div>
</template>
<script>
import datazong from "../components/bigdata/datazong.vue";
import zhu from "../components/bigdata/zhu.vue";
import yuan from "../components/bigdata/yuan.vue";
import datauploadVue from "@/components/bigdata/dataupload.vue";
export default {
  data() {
    return {};
  },
  components: {
    datazong,
    zhu,
    yuan,
    datauploadVue,
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.tip {
  background-color: rgba(22, 31, 38, 0.3);
  // background-color: rgba(17, 129, 215, 0.3);
}
.box {
  height: 42vh;
  overflow: hidden;
}
.leftbigbox {
  float: left;
  width: 17vw;
  height: 100%;
}
.rightbigbox {
  float: right;
  width: 17vw;
  height: 100%;
}
.obbz {
  height: 93%;
}
</style>